<template>
	<view class="containerbox">
		<uv-navbar title="复习" auto-back placeholder />
		
		<z-paging class="containerbox" ref="paging" v-model="list" @query="querylist" :created-reload="false" :loading-more-enabled="enabled">
			<template #loading>
				<dw_loading :status="loading" />
			</template>
			
			<view class="p-30">
				<view 
					:key="item.id"
					class="border-bottom pb-40"
					v-for="item, index in list" 
					:class="{ 'mb-30': list.length != index + 1 }"
				>
					<view class="text-38 flex-between flex-center">
						<view class="flex-left flex-center" @click="playWord(item, index)">
							<view :class="item.isStart?'color1':''" class="mr-25">{{ index + 1 }}.{{ item.word }}</view> 
							<voice :color="item.isStart ? '#0B9AFF' : '#9c9fae'" :is-play="item.play" />
						</view>
						
						<view class="w-35 h-35 mr-8" @tap.stop="collectWord(item)" v-if="params.type == 1">
							<image class="w-35 h-35" :src="`${$imageBaseUrl}study/${item.collect?.status ? 'active' : 'not'}-collect.svg`" />
						</view>
					</view>
					
					<!-- <view class="text-30 mt-20 color1" v-if="item.isStart">{{ item.translation }}</view>
					<view class="w-full h-50 bgc-1 mt-20" v-else /> -->
					<view class="flex items-center justify-between mt-20">
						<view class="color1 text-30" v-if="item.isStart">{{item.translation}}</view>
						<view class="w-full h-45 bgc-1" v-else></view>
						
						<view class="flex items-center" v-if="params.type == 1">
							<view class="h-1 w-20" />
							<uv-icon name="checkmark-circle-fill" :color="item.isRight == 1 ? '#7ece51' : '#d7d7d7'" size="50rpx" @tap="rightFn(index, 1)" />
							<view class="h-1 w-20" />
							<uv-icon name="close-circle-fill" :color="item.isRight == 0 ? '#e16857' : '#d7d7d7'" size="50rpx" @tap="rightFn(index, 0)" />
						</view>
					</view>
				</view>
			</view>
			
			<template #bottom>
				<view class="flex flex-center border-top" v-if="!loading && params.type == 1" style="padding: 8rpx 30rpx 24rpx">
					<view class="flex-1"> <text class="text-red">{{ groupIndex }}</text>/{{ list.length }}</view>
					<view class="round-10 h-80 bgc-primary flex items-center justify-center text-white px-30" @tap="submitReview">结束复习并提交</view>
				</view>
			</template>
		</z-paging>
		
	</view>
</template>

<script setup>
	
	import { imgPath } from '@/common/config';
	import { onLoad } from "@dcloudio/uni-app";
	import { ref, reactive, onMounted, nextTick } from 'vue';
	import { courseList, reviewCycle } from '@/common/apis/study';
	import voice from './components/preview-audio/voice.vue';
	import { remberDetail , collectAdd, cancelCollect } from '@/common/apis/other';
	
	
	/** 抗遗忘 id */
	const courseId = ref();
	
	/** props */
	const props = defineProps(['id']);
	const params = ref({ id:'', type: 0 });
	
	/** 词汇列表 */
	const list = ref([]);
	
	/** 当前播放词汇的状态 */
	const audioIndex = ref(-1);
	
	/** 播放词汇索引 */
	const playWordInde = ref(0);
	
	/** 关闭上一次播放 */
	const closePlay = () => {
		list.value[playWordInde.value].play = false;
	};
	
	/** 播放结束时 */
	uni.useAudio.onEnded(closePlay);
	
	/** 播放词汇 */
	const playWord = (item, index) => {
		closePlay();
		
		if(audioIndex.value>=0){
			list.value[audioIndex.value].isStart = false
		}
		item.isStart = true
		uni.useAudio.src(params.value.type == 1 ? item.voiceFile : item.voiceFile?.url);
		audioIndex.value = index
		
		uni.useAudio.onEnded(()=>{
			item.isStart = false
			list.value[playWordInde.value].play = false;
		})
		
		// 原逻辑
		// if (audioIndex.value === -1) {
		// 	/** 首次点击 */
		// 	audioIndex.value = index;
		// 	uni.useAudio.src(params.value.type == 1 ? item.voiceFile : item.voiceFile?.url);
		// 	item.isStart = false;
		// } else if (audioIndex.value === index) {
		// 	/** 二次点击 */
		// 	audioIndex.value = -1;
		// 	uni.useAudio.src(params.value.type == 1 ? item.translationVoiceFile : item.translationVoiceFile?.url);
		// 	item.isStart = true;
		// } else {
		// 	/** 点击其他词汇 */
		// 	audioIndex.value = index;
		// 	uni.useAudio.src(params.value.type == 1 ? item.voiceFile : item.voiceFile?.url);
		// 	item.isStart = false;
		// };
		
		item.play = true;
		playWordInde.value = index;
	};
	
	/** 收藏/取消收藏单词 */
	const collectWord = async wordItem => {
		if (!wordItem.collect?.status) {
			await collectAdd({ vocabularyId: wordItem.id });
			wordItem.collect.status = 1;
			
		} else {
			await cancelCollect({ vocabularyId: wordItem.id });
			wordItem.collect.status = 0;
		};
	};
	
	/** 页面初始化时 */
	onLoad(({ id, type }) => {
		params.value.id = id;
		if (type == 0) courseId.value = id;
		params.value.type= type;
	});
	
	/** z-paging 组件实例 */
	const paging = ref({});
	
	/** 请求状态 */
	const loading = ref(true);
	
	/** z-paging 是否启用加载更多数据(含滑动到底部加载更多数据和点击加载更多数据) */
	const enabled = ref(true);
	 
	const grouplist = ref([])
	 
	/** 遗忘词汇 */
	const remberList = async (page, pageSize) => {
		const query = { page, pageSize,...params.value }
		const { words } = await remberDetail({ id: props.id });
		paging.value.complete(words);
		// grouplist.value = getGroup(words);
		enabled.value = false;
		uni.$fui.sleep(() => loading.value = false);
	};
	
	/** 获取词汇列表 */
	const querylist = async (page, pageSize) => {
		if(params.value.type == 1) {
			remberList(page, pageSize)
			return
		};
		
		const queru = { page, pageSize, simplePage: 1, courseId: props.id, learned: 1 };
		const result = await courseList(queru);
		result.forEach(item => { item.isStart = false });
		paging.value.complete(result);
		// grouplist.value = getGroup(result);
		uni.$fui.sleep(() => loading.value = false)
	};
	
	
	/** 正确数量 */
	const groupIndex = ref(0);
	
	/** 复习词汇选择 */
	async function rightFn(index, num) {
		const item = list.value[index];
		let _index = 0;
		if (item.isRight === num) delete item.isRight;
		else item.isRight = num;
		list.value.forEach(item => item.isRight && _index++);
		groupIndex.value = _index;
		playWord(item, index);
	};
	
	
	/** 提交遗忘复习 */
	async function submitReview(){
		const words = list.value.filter(item => 'isRight' in item).map(({ id, isRight }) => ({ id, isRight }));
		if (!words.length) {
			uni.showToast({ icon: 'none', title: '暂无可提交的复习单词~' });
			return;
		};
		
		await reviewCycle({ cycleId: params.value.id, words });
		uni.navigateBack();
		uni.$fui.toast('提交成功~');
	};
	
	
</script>


<style>page{background-color: #fff}</style>
<style scoped lang="scss">
	.bgc-1{background: #E7E7E7;opacity: .5}
	.color1{color: #0B9AFF}
	.color2{color: #BABABA}
	.color3{color: #F69B2C}
</style>